<template>
	<div id="container" style="height: 100vh;width: 100vw;"></div>
</template>
<script>
	import AMapLoader from '@amap/amap-jsapi-loader';
	export default {
		data() {
			return {
				title: 'Hello',
				AMap: null,
				map: null
			}
		},
		onLoad() {
			
			AMapLoader.load({
				"key": "0583925ade275d3d7e371f7ac368be60",              // 申请好的Web端开发者Key，首次调用 load 时必填
				"version": "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
				"plugins": [],           // 需要使用的的插件列表，如比例尺'AMap.Scale'等
				"AMapUI": {             // 是否加载 AMapUI，缺省不加载
					"version": '1.1',   // AMapUI 版本
					"plugins":['overlay/SimpleMarker'],       // 需要加载的 AMapUI ui插件
				},
				"Loca":{                // 是否加载 Loca， 缺省不加载
					"version": '2.0'  // Loca 版本
				},
			}).then((AMap)=>{
				this.map = new AMap.Map("container",{  //设置地图容器id
					zoom:12,           //初始化地图级别
				});
				this.AMap = AMap;
				this.Geolocation();
			}).catch((e)=>{
				console.error(e);  //加载错误提示
			});
			
			
		},
		methods: {
			Geolocation() {
				let _this = this;
				_this.AMap.plugin('AMap.Geolocation', function() {
				  var geolocation = new AMap.Geolocation({
				    // 是否使用高精度定位，默认：true
				    enableHighAccuracy: true,
				    // 设置定位超时时间，默认：无穷大
				    timeout: 10000,
				    // 定位按钮的停靠位置的偏移量
				    offset: [10, 20],
				    //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
				    zoomToAccuracy: true,     
				    //  定位按钮的排放位置,  RB表示右下
				    position: 'RB'
				  })
				
				  geolocation.getCurrentPosition(function(status,result){
					  console.log(status,result);
				        if(status=='complete'){
							_this.map.setCenter([result.position.KL,result.position.kT]);
							var marker = new AMap.Marker({
							    position: [result.position.KL,result.position.kT],
							    title: 'test'
							});
							_this.map.add(marker);
				        }else{
						   alert(JSON.stringify(result.message));
						}
						
				  });
				})
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
